import { useEffect } from "react"
import * as THREE from 'three'
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import Stats from "three/examples/jsm/libs/stats.module.js";
/*
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2023-10-19 11:35:36
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2023-10-25 22:50:28
 * @FilePath: /three-react/src/pages/Base.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */

const width = window.innerWidth - 200;
const height = window.innerHeight

function createRender(width, height) {

  // 创建场景
  const scene = new THREE.Scene();
  // 创建相机
  const camera = new THREE.PerspectiveCamera(60, width / height, 1, 1400);
  camera.position.set(0, 0, 400);
  camera.lookAt(0, 0, 0);
  // 创建webgl渲染器
  const renderer = new THREE.WebGLRenderer();
  // 设置渲染器窗口大小
  renderer.setSize(width, height);
  document.getElementById("container")?.appendChild(renderer.domElement);






  const axesHelper = new THREE.AxesHelper(200);
  scene.add(axesHelper)

  // 环境光
  const ambient = new THREE.AmbientLight(0xffffff, 0.4);
  scene.add(ambient);

  const stats = new Stats();
  document.getElementById("container")?.appendChild(stats.domElement);

  // 轨道控制器
  const controls = new OrbitControls(camera, renderer.domElement);
  controls.addEventListener('change', function () {

  })

  function animate() {
    requestAnimationFrame(animate)
    // 渲染场景
    renderer.render(scene, camera);
    stats.update();
  }
  animate();
  return renderer
}
export default function BufferGeometry() {
  useEffect(() => {
    if (!window.isMounted) {
      createRender(width, height);
      window.isMounted = true;
    }
  }, [])
  return (
    <div id="container"></div>
  )
}